<template>
  <view class="content-list-container">
    <view class="content-wrap">
      <view
        v-if="item.type === 1 && item.cover.length === 1"
        class="content-item1 u-flex u-p-20"
      >
        <view class="left-wrap u-flex-1 u-flex-col u-row-between">
          <view>{{ item.title }}</view>
          <view class="u-flex">
            <view>{{ item.user.nickname }}</view>
            <view class="u-m-l-20">{{ item.comment_length }}跟帖</view>
          </view>
        </view>
        <u-image
          width="208rpx"
          mode="aspectFit"
          height="168rpx"
          :src="'http://127.0.0.1:3000' + item.cover[0].url"
        ></u-image>
      </view>
      <view
        v-else-if="item.type === 1 && item.cover.length > 1"
        class="content-item2 u-p-20"
      >
        <view>{{ item.title }}</view>
        <view class="show-image u-flex u-m-t-10">
          <u-image
            v-for="(img, index) in item.cover"
            :key="index"
            class="u-flex-1"
            width="100%"
            height="270rpx"
            :src="'http://127.0.0.1:3000' + img.url"
          ></u-image>
        </view>
      </view>
      <view v-else class="content-item-video u-p-20">
        <u-image
          :src="'http://127.0.0.1:3000' + item.cover[0].url"
          width="100%"
          mode="widthFix"
        ></u-image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
};
</script>

<style lang="scss" scoped>
.left-wrap {
  height: 168rpx;
}
.show-image {
  u-image {
    &:nth-child(2) {
      margin: 0 20rpx;
    }
  }
}
.content-item-video {
  position: relative;
  //   &::before {
  //     content: '';
  //     opacity: 0;
  //     position: absolute;
  //     top: 0;
  //     left: 0;
  //     right: 0;
  //     bottom: 0;
  //     width: 100%;
  //     height: 100%;
  //     background-color: rgba(238, 238, 238, 0.2);
  //     transition: all 0.4s ease 0s;
  //   }

  //   &:hover ::before {
  //     content: '';
  //     position: absolute;
  //     top: 0;
  //     left: 0;
  //     right: 0;
  //     bottom: 0;
  //     width: 100%;
  //     height: 100%;
  //     background-color: rgba(238, 238, 238, 0.2);
  //     transition: all 0.4s ease 0s;
  //   }
}
</style>
